<script setup>
import { ref } from 'vue'
import { getMyCouponList } from '@/api/coupon'
import CouponItem from '@/components/CouponItem.vue'

const n = ref(1)
const list = ref([])

const toggle = async (num, dataType) => {
  n.value = num
  const { data } = await getMyCouponList({ dataType, page: 1 })
  list.value = data.list.data
}

const init = async () => {
  const { data } = await getMyCouponList({ dataType: 'isUnused', page: 1 })
  list.value = data.list.data
}
init()
</script>

<template>
  <div class="coupon-container">
    <van-nav-bar
      title="我的优惠券"
      left-arrow
      fixed
      @click-left="$router.back()"
    />

    <p class="header">
      <span :class="{ activated: n === 1 }" @click="toggle(1, 'isUnused')"
        >未使用</span
      >
      <span :class="{ activated: n === 2 }" @click="toggle(2, 'isUse')"
        >已使用</span
      >
      <span :class="{ activated: n === 3 }" @click="toggle(3, 'isExpire')"
        >已过期</span
      >
    </p>

    <!-- 空页面 -->
    <div class="empty" v-if="!list.length">
      <img src="@/assets/empty.png" />
      <p>亲，暂无相关优惠券</p>
    </div>

    <div class="list" v-else>
      <CouponItem
        :item="item"
        v-for="item in list"
        :key="item.coupon_id"
        :class="{ gray: item.is_use || item.is_expire }"
      ></CouponItem>
    </div>
  </div>
</template>

<style lang="less" scoped>
.coupon-container {
  padding-top: 46px;
}

.van-nav-bar {
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
  }

  ::v-deep .van-icon-arrow-left {
    color: black;
  }
}

.header {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  background-color: white;

  span {
    padding: 5px;
    font-size: 15px;
    color: rgb(48, 49, 51);
  }

  .activated {
    font-weight: bold;
    color: rgb(250, 34, 9);
    border-bottom: 3px solid rgb(250, 34, 9);
  }
}

.list {
  background-color: white;
}

.gray {
  background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
}

.empty {
  width: 325px;
  height: 197px;
  padding: 90px 25px;
  text-align: center;

  img {
    width: 140px;
    height: 92px;
  }

  p {
    font-size: 14px;
    color: grey;
    margin: 37px 0;
  }
}
</style>
